<script setup lang="ts">
import { computed } from 'vue'
import type { MessageType } from '../../message/types'
import { messageClassOf, messageFilledIconOf } from '../../message'

const props = defineProps({
  type: {
    type: String
  },
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  },
  contentHtml: {
    type: Boolean
  },
  positiveText: {
    type: String,
    required: true
  },
  negativeText: {
    type: String
  }
})

const msgBoxClass = computed<string>(() => {
  const type = props.type
  if (!type) {
    return ''
  }
  return messageClassOf(type as MessageType)
})

const msgBoxIcon = computed<string | null>(() => {
  const type = props.type
  if (!type) {
    return null
  }
  return messageFilledIconOf(type as MessageType)
})

const emit = defineEmits(['close', 'positive', 'negative'])

function onPositive() {
  emit('close')
  emit('positive')
}

function onNegative() {
  emit('close')
  emit('negative')
}
</script>
<template>
  <div class="msg-box">
    <div class="msg-box-header">
      <i v-if="msgBoxIcon" :class="`${msgBoxIcon} ${msgBoxClass}`" />
      <span>{{ title }}</span>
    </div>
    <div v-if="contentHtml" class="msg-box-content" v-html="content" />
    <div v-else class="msg-box-content">
      {{ content }}
    </div>
    <div class="msg-box-footer buttons">
      <button class="button is-white" v-if="negativeText" @click="onNegative">
        {{ negativeText }}
      </button>
      <button class="button" :class="msgBoxClass" @click="onPositive">{{ positiveText }}</button>
    </div>
  </div>
</template>
